<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
    <script type="text/javascript" src="./js/layer/layer.js"></script>
    <script type="text/javascript" src="./js/moxie.js"></script>
    <script type="text/javascript" src="./js/plupload.dev.js"></script>
    <script type="text/javascript" src="./js/tab.js"></script>
    <script type="text/javascript" src="./js/i18n/zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <link rel="stylesheet" type="text/css" href="./css/plugin.css">

<link rel="stylesheet" type="text/css" href="../../../dev/CKeditor/CKeditorHtml/css/base.css">
<link rel="stylesheet" type="text/css" href="../../../dev/Ckeditor/CKeditorHtml/css/plugin.css">
</head>

<body>
    <div class="ckeditor-imgupload-dialog" data-relateto="J_xy-editor-textarea">
        <ul class="imgupload-tab-hd">
            <li class="active"><a href="#tabbd-localupload-container">本地上传</a></li>
            <li><a href="#tabbd-gallery-container">相册图片</a></li>
            <li class="move-seat"></li>
        </ul>
        <div class="ckeditor-localupload-container active" data-relateto="#tabbd-localupload-container">
            <div class="ckeditor-uploadfile-container">
                <div class="ckeditor-uploadfile-hd">
                    <div class="img-upload-allprogress">
                        <span class="txt"></span>
                        <span class="percentage"></span>
                    </div>
                    <div class="img-upload-info"></div>
                    
                    <a href="javascript:void(0);" class="img-upload-btn disabled">开始上传</a>
                    <div class="img-add-btn" id="img-add-btn-1">添加文件</div>
                    <a href="javascript:void(0);" class="img-pause-btn">暂停上传</a>
                </div>
                <ul class="ckeditor-uploadfile-list">
                    <!-- <li>
                        <div class="img-before-preview">
                            <p class="title">图片名称图片名称图片名称.png</p>
                            <p class="img-loading" style="display:block;"></p>
                        </div>
                    </li>

                    <li>
                        <div class="img-before-preview">
                            <p class="title">图片名称图片名称图片名称.png</p>
                            <p class="txt-error-tip" style="display:block;">该浏览器不支持图片预览</p>
                        </div>
                    </li>

                    <li>
                        <div class="img-after-preview" style="display: block;">
                             <img src="../images/webuploader/not_file_image.png" class="img-upload" />
                        </div>
                        <a href="#" class="img-del-btn"></a>
                        <div class="img-progress" style="display: block;"><span style="width:50%;"></span></div>
                    </li> -->
                </ul>
                <div class="ckeditor-uploadfile-ft">
                    <label class="ft-save-checkbox">
                        <input type="checkbox" name="" />保存到相册</label>
                    <select class="ft-gallery-sel" disabled>
                        <option value="1">默认相册</option>
                    </select>
                    <a href="#" class="ft-btn-insert disabled">插入</a>
                    <a href="#" class="ft-btn-cancel">关闭</a>
                </div>
                <div class="ckeditor-uploadfile-errortip"><i class="close"></i><div class="txt"></div></div>
            </div>
        </div>
        <div class="ckeditor-gallery-container" data-relateto="#tabbd-gallery-container">
            <div class="ckeditor-gallery-nodata" style="display:none;">
                您的相册目前还没有照片,<a href="#">立马去上传</a>
            </div>
            <div class="ckeditor-gallery-hasdata" style="display:block;">
                <ul class="ckeditor-gallery-list">
                    <li class="active">
                        <div class="pic"><img src="../uploadDemo/01.jpg" /></div>
                        <span class="status-check"></span>
                    </li>
                    <li>
                        <div class="pic"><img src="../uploadDemo/01.jpg" /></div>
                        <span class="status-check"></span>
                    </li>
                </ul>
                <div class="ckeditor-gallery-ft">
                    <select class="ft-galleryall-sel">
                        <option value="1">默认相册</option>
                        <option value="2">相册2</option>
                    </select>
                    <a href="#" class="ft-galleryall-insert">插入</a>
                    <a href="#" class="ft-galleryall-cancel">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!-- ************************************************** -->
    <div class="ckeditor-imgedit-dialog">
        <div class="item-cell">
                <label class="lab">宽：</label>
                <input type="text" size="10" name="imgw" class="ipt-text">
        </div>
        <div class="item-cell">
                <label class="lab">高：</label>
                <input type="text" size="10" name="imgh" class="ipt-text">
        </div>
        <div class="item-cell">
                <label class="lab">描述：</label>
                <input type="text" name="imgintro" class="ipt-text">
        </div>
         <div class="item-ratio">
            <span class="btnlock active"></span>
            <span class="btnreset"></span>
        </div>
        

        <div class="ckeditor-imgedit-ft">
            <a href="#" class="ft-btn-cancel">取消</a>
            <a href="#" class="ft-btn-insert ">修改</a>
        </div>
    </div>


    <!-- ************************************************** -->
    <div class="ckeditor-iframebox-dialog">
        <div class="item-cell">
            <label class="lab">URL地址</label>
            <input type="text" class="ckeditor-coms-formtext" size="50" name="iframeboxurl">
        </div>

        <div class="item-cell">
            <label class="lab">宽</label>
            <input type="text" class="ckeditor-coms-formtext" size="8" name="iframeboxw">
        </div>

        <div class="item-cell">
            <label class="lab">高</label>
            <input type="text" class="ckeditor-coms-formtext" size="8" name="iframeboxh">
        </div>

       
        <div class="ckeditor-iframebox-ft">
            <a href="#" class="ckeditor-btn-default">关闭</a>
            <a href="#" class="ckeditor-btn-primary">确认</a>
        </div>
    </div>
    

    <!--  -->
    <div class="ckeditor-tablebox-dialog">
        <div class="item-cell">
            <label class="lab">行</label>
            <input type="text" size="15" class="ckeditor-coms-formtext">
        </div>
        <div class="item-cell">
            <label class="lab">列</label>
            <input type="text" size="15"  class="ckeditor-coms-formtext">
        </div>
        <div class="item-cell">
            <label class="lab">边框</label>
            <input type="text" size="15"  class="ckeditor-coms-formtext">
            <span class="tip-width">(不设置默认100%)</span>
        </div>

        <div class="ckeditor-tablebox-ft">
            <a href="#" class="ckeditor-btn-default">关闭</a>
            <a href="#" class="ckeditor-btn-primary">确认</a>
        </div>
    </div>


    <!-- ************************************** -->
    <div class="ckeditor-link-dialog">
        <div class="item-cell">
            <label class="lab">显示文本</label>
            <input type="text" size="38" class="ckeditor-coms-formtext">
        </div>

        <div class="item-cell item-xyurl">
            <label class="lab">URL</label>
            <select class="sel J_sel-xy">
                <option value="1">http://</option>
                <option value="2">https://</option>
            </select>
            <input type="text"  class="ckeditor-coms-formtext" size="24">
        </div>
        <div class="item-cell">
            <label class="lab">目标窗口</label>
            <select class="sel J_sel-url">
                <option value="1">新窗口</option>
                <option value="2">当前窗口</option>
            </select>
            
        </div>
        <div class="ckeditor-link-ft">
            <a href="#" class="ckeditor-btn-default">关闭</a>
            <a href="#" class="ckeditor-btn-primary">确认</a>
        </div>
    </div>


<!-- 上传附件************************************** -->
    <!-- <div class="ckeditor-fujian-dialog">
        <div class="item-cell">
            <span class="fjname">某某附件见.zip</span>
            <span class="fjsize">60.5kb</span>
            <div class="fj-hand">
                <div class="progress"><span class="width:30%;"></span></div>
                <span class="">插入</span>
                <span class="">删除</span>
            </div>

        </div>
    </div> -->



<!-- 表情************************************** -->
    <div class="ckeditor-smiley-dialog">
        <ul class="smiley-hd-list">
            <li class="active"><a href="#">默认表情</a></li>
            <li><a href="#">小鱼</a></li>
            <li><a href="#">免司机</a></li>
            <li class="move-seat"></li>
        </ul>

        <div class="smiley-bd">
            <ul class="smiley-pic-list active">
                <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
                 <li><img src="./images/demo/01.gif"></li>
                <li><img src="./images/demo/02.GIF"></li>
            </ul>
        </div>

        



    </div>




<!-- ************************************** -->

    <button id="x1">弹出上传图片对话框</button>
    <button id="x2">弹出编辑图片对话框</button>
    <button id="x3">弹出iframebox对话框</button>
    <button id="x4">弹出tablebox对话框</button>
    <button id="x5">弹出link对话框</button>

    <button id="x6">表情弹出框</button>

    <script type="text/javascript" src="index01.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.imgupload-tab-hd a').click(function(e) {
            e.preventDefault();
            $(this).editorTab('show');
        });
        $("#x6").on("click",function(){
            layer.open({
              type: 1,
              shade: false,
              title:false, //不显示标题
              area: '460px',
              move:".ckeditor-smiley-dialog .move-seat",
              content: $(".ckeditor-smiley-dialog"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              success: function(layero, index){
               
              },
              cancel: function(index, layero){ 
                
              }
            });
        });
        $("#x5").on("click",function(){
            layer.open({
              type: 1,
              shade: false,
              
              title:"连接设置", //不显示标题
              area: '430px',
              content: $(".ckeditor-link-dialog"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              success: function(layero, index){
               
              },
              cancel: function(index, layero){ 
                
              }
            });
        })

        $("#x1").on("click", function() {
            layer.open({
              type: 1,
              shade: false,
              
              title: false, //不显示标题
              area: '702px',
              content: $(".ckeditor-imgupload-dialog"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              success: function(layero, index){
               
              },
              cancel: function(index, layero){ 
                
              }
            });
        });

        $("#x2").on("click",function(){
            layer.open({
              type: 1,
              shade: false,
              title:"图片属性设置", //不显示标题
              area: '350px',
              content: $(".ckeditor-imgedit-dialog"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              success: function(layero, index){
               
              },
              cancel: function(index, layero){ 
                
              }
            });
        });

        $("#x3").on("click",function(){
            layer.open({
              type: 1,
              shade: false,
              
              title:"iframe属性设置", //不显示标题
              area:"500px",
              content: $(".ckeditor-iframebox-dialog"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              success: function(layero, index){
               
              },
              cancel: function(index, layero){ 
                
              }
            });
        });

        $("#x4").on("click",function(){
            layer.open({
              type: 1,
              shade: false,
              title:"iframe属性设置", //不显示标题
              area:"350px",
              content: $(".ckeditor-tablebox-dialog"), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              success: function(layero, index){
               
              },
              cancel: function(index, layero){ 
                
              }
            });
        })
    })
    </script>
</body>

</html>